<template>
  <div>
    <div class="user-info" style="position: relative;">
      <div class="userImg" style="display: inline-block;">
        <img v-if="userInfo.avatar" :src="userInfo.avatar" alt="" srcset="">
        <img v-else src="../../../assets/w700d1q75cms.jpg">
      </div>
      <div class="main" style="display: inline-block;">
        <div class="main__title" @click="viewUserInfo">
          <h3 class="name">{{ userInfo.nickname }}</h3>
          <span style="color: #fff">
            <img src="../../../assets/my/Frame.png" alt="" srcset="" style="width: 20px;height: 20px;">
          </span>
        </div>
        <div class="main__id" @click="doCopy(userInfo.id)">
          <span class="code">{{ userInfo.mobile }}</span>
        </div>
      </div>
      <div style="position: absolute;float: right;right: 20px;display: inline-block;" v-if="userInfo.is_wechat != '1'">
        <div
          style="width: 100px;height: 30px;background: rgba(255,255,255,0.8);border-radius: 20px;margin-top: 10px;line-height: 30px;display: flex;text-align: center;"
          @click="bindWechart">
          <img src="../../../assets/my/wechat.png" alt="" srcset=""
            style="width: 20px;height: 20px;padding-top: 5px;padding-left: 15px;">
          <div style="font-size: 12px;width: 60px;">绑定微信</div>
        </div>
      </div>

      <div
        style="width: 94%;height: 76px;background: linear-gradient( 90deg, #393834 0%, #151211 100%);border-radius: 14px 14px 0px 0px;z-index: 99;position: absolute;bottom: 0;"
        @click="togovip">

        <div style="margin-top: 11px;margin-left: 15px;">

          <div style="display: flex;">
            <img src="../../../assets/viphuang.png" alt="" srcset="" style="width: 28px;height: 28px;">

            <div style="width: 302rpx;
height: 42rpx;
font-family: MiSans, MiSans;
font-weight: 500;
font-size: 32rpx;
color: #F9E1BC;
line-height: 38rpx;margin-left: 4px;margin-top: 8px;">
              当前身份：会员</div>

              <div style="width: 120px;height: 14px;float: right;right: 10px;margin-top: 10px;position: absolute;">
            <van-button round style="background-color: #FFD29C;width: 100px;height: 28px;">会员权益</van-button>
          </div>
          </div>


         
        </div>

        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 13px;color: #F9E1BC;margin-left: 15px;margin-top: 5px;">
          会员ID：{{ userInfo.id }}</div>

      </div>
    </div>

    <!-- </div> -->
    <!-- <div
      style="position: absolute;margin-top: 20%;margin-left: 5%;width: 330px;height: 76px;background: linear-gradient( 90deg, #393834 0%, #151211 100%);border-radius: 14px 14px 0px 0px;"
      @click="togovip">
     
      <div style="display: flex;margin-top: 11px;margin-left: 15px;">
        <div style="position: absolute;width: 120px;height: 14px;float: right;right: 10px;top: 23px;">
        <van-button round  
          style="background-color: #FFD29C;width: 100px;height: 28px;">会员权益</van-button>
      </div>
        <img src="../../../assets/viphuang.png" alt="" srcset="" style="width: 28px;height: 28px;">
        <div
          style="font-family: MiSans, MiSans;font-weight: 500;font-size: 16px;color: #F9E1BC;margin-left: 4px;margin-top: 5px;">
          当前身份：会员</div>
      </div>
    
      <div
        style="font-family: MiSans, MiSans;font-weight: 400;font-size: 13px;color: #F9E1BC;margin-left: 15px;margin-top: 5px;">
        会员ID：{{ userInfo.id }}</div>

     
    </div> -->

    <van-popup v-model="showDialog" :style="{ height: '190px', width: '300px', borderRadius: '15px' }">
      <div class="dialog-content" style="text-align: center;">
        <div style="font-family: MiSans, MiSans;font-weight: 500;font-size: 20px;margin-top: 30px;"> 绑定微信</div>
        <div style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #999999;margin-top: 16px;
">
          点击下方按钮绑定您的微信账号
        </div>
        <div style="text-align: center;">

          <div
            style="width: 234px;height: 44px;background: #389138;border-radius: 100px;line-height: 44px;color: #fff;margin-top: 21px;margin-left: 28px;display: flex;"
            @click="queding">
            <img src="../../../assets/my/wechart4.png" alt="" srcset=""
              style="width: 24px;height: 24px;line-height: 24px;padding-top: 10px;padding-left: 74px;">
            <div style="padding-left: 10px;">绑定微信</div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import VueClipboard from 'vue-clipboard2'
import { authorize } from "@/utils/authorize";
Vue.use(VueClipboard)

export default {
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      showDialog: false
    }
  },
  mounted() {


  },
  methods: {
    bindWechart() {
      // this.getCode()
      // this.getJssdkConfig();
      this.showDialog = true

    },
    getJssdkConfig() {
      // 调接口获取jssdk配置
      this.request({
        url: "/api/v1/user/get_jssdk",
        data: {
          url: window.location.href.split("#")[0]
        },
        successFn: res => {
          let data = res.data;
          wx.config({
            //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appid, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.noncestr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名，见附录1
            jsApiList: ["scanQRCode", "openLocation", "chooseWXPay"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });
          /* wx.error(re => {
            console.log(re, "jssdk配置失败");
          }); */
        }
      });
    },
    queding() {
      authorize()
      // this.getCode()
      this.showDialog = false


    },
    // 获取微信用户code
    getCode() {
      let appid = 'wxb9d88d2699657316';
      let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=http://yushi.junhecms.com&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;;
      this.code = this.getUrlCode().code;
      alert(this.code)
      console.log(this.code);

      //如果没有code 去获取code
      if (this.code == null) {
        window.location.href = url;
      } else {
        //获取到code后的逻辑
        console.log('code', this.code);
        // this.getOpenid(this.code)
      }
    },
    // 截取url中的code
    getUrlCode() {
      var url = location.search;
      var theRequest = new Object();
      if (url.indexOf("?") !== -1) {
        var str = url.substr(1)
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
        }
      }
      return theRequest;
    },
    viewUserInfo() {
      //viewUserInfo
      this.$router.push({
        path: '/viewUserInfo'
      })
    },
    togovip() {
      this.$router.push({
        path: '/vip'
      })
    },
    doCopy(val) {
      this.$copyText(val).then(
        (e) => {
          // success
          this.$toast.success('Id复制成功')
        },
        (e) => {
          // fail
          console.log(e)
        }
      )
    },
    toUserSetting() {
      this.$router.push({ name: 'UserSetting' })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.user-info {
  // display: flex;
  flex-direction: row;
  padding: 60px 24px 50px 24px;
  background: #389138;
  height: 250px;

  // border-radius: 100% 100% 100% 100% / 0% 0% 16% 16%;
  .userImg {
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }

  .user__set {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 50px;
  }

  .main {
    margin-left: 18px;

    .main__title {
      display: flex;
      flex-direction: row;
      align-items: center;

      // margin-top: 6px;
      .name {
        font-size: 34px;
        font-weight: 500;
        color: #fff;
        display: inline-block;
        max-width: 350px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 20px;
      }
    }

    .main__id {
      margin-top: 24px;

      .code {
        font-size: $small;
        font-weight: 400;
        color: #fff;
        margin-right: 10px;
      }
    }
  }
}
</style>
